﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>BootStrap-Datepicker-demo</title>
    <link rel="icon" href="http://www.ofall.cn/favicon.ico" mce_href="http://www.ofall.cn/favicon.ico"
        type="image/x-icon" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/datepicker.css" rel="stylesheet" type="text/css" />
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"  type="text/javascript"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js" type="text/javascript"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" type="text/javascript"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <section id="typeahead">
      <div class="page-header">
        <h1>Datepicker for Bootstrap <small>bootstrap-datepicker.js - original idea from <a href="http://www.eyecon.ro/bootstrap-datepicker/">Stefan Petre</a></small></h1>
      </div>
      <div class="row">
       <div class="alert alert-success">
        <p>Contrary to the <a href="http://www.eyecon.ro/bootstrap-datepicker/">Stefan's one</a>, this version works with <strong>IE7+</strong> and from <strong>Bootstrap v2.0.2</strong>.</p>
        <p>Also added:<ul>
          <li>When the field is empty, the selection is done on the current date (instead of 1/1/1970)</li>
          <li>When you use tab from fields to fields, then no value is selected by default into the field date</li>
        </ul></p>
       </div>
        <div class="span3 columns">
          <h3>About</h3>
          <p>Add datepicker picker to field or to any other element.</p>
		  <ul>
			<li>can be used as a component</li>
			<li>formats: dd, d, mm, m, yyyy, yy</li>
			<li>separators: -, /, .</li>
		  </ul>
          <p><a href="https://github.com/Aymkdn/Datepicker-for-Bootstrap" class="btn">Download</a></p>
        </div>
        <div class="span9 columns">
          <h2>Example</h2>
          <p>Attached to a field with the format specified via options.</p>
          <div class="well">
            <input type="text" class="span2" value="" id="dp1" >
          </div>
          <p>Attachet to a field with the format specified via data tag.</p>
          <div class="well">
            <input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="dp2" >
          </div>
          <p>As component.</p>
          <div class="well form-inline">
			  <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
				<input class="span2" size="16" type="text" value="12-02-2012" readonly>
				<span class="add-on"><i class="icon-th"></i></span>
			  </div>
          </div>
          <p>Attached to other elment then field and using events to work with the date values.</p>
          <div class="well">
            
            
			<div class="alert alert-error" id="alert">
				<strong>Oh snap!</strong>
			  </div>
			<table class="table">
				<thead>
					<tr>
						<th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a></th>
						<th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td id="startDate">2012-02-20</td>
						<td id="endDate">2012-02-25</td>
					</tr>
				</tbody>
			</table>
          </div>
          <hr>
          <h2>Using bootstrap-datepicker.js</h2>
          <p>Call the datepicker via javascript:</p>
          <pre class="prettyprint linenums">$('.datepicker').datepicker()</pre>
          <h3>Options</h3>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 100px;">Name</th>
               <th style="width: 50px;">type</th>
               <th style="width: 100px;">default</th>
               <th>description</th>
             </tr>
            </thead>
            <tbody>
              <tr>
               <td>format</td>
               <td>string</td>
               <td>'mm/dd/yyyy'</td>
               <td>the date format, combination of  d, dd, m, mm, yy, yyy.</td>
             </tr>
              <tr>
               <td>weekStart</td>
               <td>integer</td>
               <td>0</td>
               <td>day of the week start. 0 for Sunday -  6 for Saturday</td>
             </tr>
            </tbody>
          </table>

          <h3>Markup</h3>
          <p>Format a component.</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;input-append date&quot; id=&quot;dp3&quot; data-date=&quot;12-02-2012&quot; data-date-format=&quot;dd-mm-yyyy&quot;&gt;
  &lt;input class=&quot;span2&quot; size=&quot;16&quot; type=&quot;text&quot; value=&quot;12-02-2012&quot;&gt;
  &lt;span class=&quot;add-on&quot;&gt;&lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
</pre>
          <h3>Methods</h3>
          <h4>.datepicker(options)</h4>
          <p>Initializes an datepicker.</p>

          <h3>Other calls</h3>
          
	  <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 50px;">Action</th>
               <th>description</th>
             </tr>
            </thead>
            <tbody>
              <tr>
               <td>destroy</td>
               <td>Remove the Datepicker from the element</td>
             </tr>
            </tbody>
          </table>
	
	  <pre class="prettyprint linenums">$('.datepicker').datepicker("destroy")</pre>
	  
          <h3>Events</h3>
          <p>Datepicker class exposes a few events for manipulating the dates.</p>
          <table class="table table-bordered table-striped">
            <thead>
             <tr>
               <th style="width: 150px;">Event</th>
               <th>Description</th>
             </tr>
            </thead>
            <tbody>
             <tr>
               <td>show</td>
               <td>This event fires immediately when the date picker is displayed.</td>
             </tr>
             <tr>
               <td>hide</td>
               <td>This event is fired immediately when the date picker is hidden.</td>
             </tr>
             <tr>
               <td>changeDate</td>
               <td>This event is fired when the date is changed.</td>
             </tr>
            </tbody>
          </table>
<pre class="prettyprint linenums">
$(&#039;#dp5&#039;).datepicker()
  .on(&#039;changeDate&#039;, function(ev){
    if (ev.date.valueOf() &lt; startDate.valueOf()){
      ....
    }
  });
</pre>
        </div>
      </div>
    </section>
    </div>
    <script src="../jquery-1.11.1.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#dp1').datepicker({
                format: 'mm-dd-yyyy'
            });
            $('#dp2').datepicker();
            $('#dp3').datepicker();


            var startDate = new Date(2012, 1, 20);
            var endDate = new Date(2012, 1, 25);
            $('#dp4').datepicker()
				.on('changeDate', function (ev) {
				    if (ev.date.valueOf() > endDate.valueOf()) {
				        $('#alert').show().find('strong').text('The start date can not be greater then the end date');
				    } else {
				        $('#alert').hide();
				        startDate = new Date(ev.date);
				        $('#startDate').text($('#dp4').data('date'));
				    }
				    $('#dp4').datepicker('hide');
				});
            $('#dp5').datepicker()
				.on('changeDate', function (ev) {
				    if (ev.date.valueOf() < startDate.valueOf()) {
				        $('#alert').show().find('strong').text('The end date can not be less then the start date');
				    } else {
				        $('#alert').hide();
				        endDate = new Date(ev.date);
				        $('#endDate').text($('#dp5').data('date'));
				    }
				    $('#dp5').datepicker('hide');
				});
        });
    </script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js" type="text/javascript"></script>
</body>
</html>
